<template>
  <div class="win">
    <form @submit="submit">
      <div class="input_box">
        <input
          type="text"
          v-model="phone"
          placeholder="请输入新手机号"
          maxlength="11"
          placeholder-style="color:#C3C3C3"
        />
        <div class="yzm_box">
          <input
            class="yzm"
            type="text"
            v-model="yzm"
            placeholder="请输入验证码"
            maxlength="6"
            placeholder-style="color:#C3C3C3"
          />
          <button v-if="yzmShow" @click="getYzm">获取验证码</button>
          <button class="grey" v-else>{{countdown+'s倒计时'}}</button>
        </div>
      </div>
      <div class="btn_box">
        <button form-type="submit">立即修改</button>
      </div>
    </form>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      countdown: 60, //验证码倒计时
      yzmShow: true, //验证码按钮显示
      phone: "", //双向绑定手机号
      yzm: "" //双向绑定验证码
    };
  },
  methods: {
    // 请求接口修改手机号
    getPhone() {
      this.$ajax("/home/mine/write_phone", "post", {
        phone: this.phone,
        code: this.yzm
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "修改成功!"
            });
            this.hr_settings();
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    // 判断手机号
    isPhone(phone) {
      return !(!/^(1[3-9])\d{9}$/.test(phone) || phone == "");
    },
    // 点击获取验证码
    getYzm() {
      if (this.isPhone(this.phone)) {
        this.$ajax("/home/GetInfo/getSmsCode", "post", {
          phone: this.phone,
          mark: "writePhone"
        })
          .then(res => {
            if (res.status) {
              this.$toast({
                content: "已发送验证码"
              });
              this.timeDown();
            } else {
              this.$toast({
                content: res.msg
              });
            }
          })
          .catch(err => {});
      } else
        this.$toast({
          content: "请输入有效的手机号"
        });
    },
    //验证码60S倒计时
    timeDown() {
      this.yzmShow = false;
      this.timeClear = setInterval(() => {
        if (this.countdown === 0) {
          this.countdown = 60;
          clearInterval(this.timeClear);
          this.timeClear = null;
          this.yzmShow = true;
        } else {
          this.countdown--;
          // 发送请求获得验证码
        }
      }, 1000);
    },
    // 提交表单内容
    submit(e) {
      // let form_id = e.mp.detail.formId;
      if (!this.isPhone(this.phone))
        return this.$toast({
          content: "请输入有效手机号码"
        });
      if (this.yzm.length !== 6)
        return this.$toast({
          content: "请输入有效验证码"
        });
      this.getPhone();
    },
    hr_settings() {
      wx.navigateTo({
        url: "../settings/main"
      });
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
  }
};
</script>

<style lang="scss" scoped>
.win {
  .input_box {
    box-sizing: border-box;
    width: 750rpx;
    padding: 0 40rpx;
    input {
      box-shadow: 4rpx 6rpx 16prx 0rpx rgba(119, 119, 119, 0.25);
      height: 70rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 20rpx;
      margin: 7% 0 0 0;
      font-size: 30rpx;
      color: #4d4d4d;
      padding: 0 24rpx;
    }
    .yzm_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yzm {
        width: 438rpx;
        margin-right: 20rpx;
      }
      button {
        font-size: 28rpx;
        margin: 7% 0 0 0;
        width: 210rpx;
        height: 68rpx;
        line-height: 68rpx;
        background-color: #ffffff;
        color: $green;
        border-radius: 20rpx;
      }
      .grey {
        color: #c3c3c3;
      }
    }
  }
  .btn_box {
    margin-top: 10vh;
    button {
      line-height: 92rpx;
      color: #ffffff;
      font-size: 40rpx;
      margin: 7% auto 0;
      width: 692rpx;
      height: 92rpx;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
      border-radius: 46rpx;
    }
  }
}
</style>
